<template>
  <div>
    <span 
      v-for="i in 12"
      :key="i"
      @click="handleClick(i)"
    >
      项目{{i}}
    </span>
    <hr>
    theater {{id}} {{$route.query.city}}
    <hr>
    <button @click="handleBtnClick">电影</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0
    }
  },
  // beforeRouteUpdate() {
  //   console.log(0)
  // }
  watch: {
    $route: {
      handler(r) {
        this.id = r.params.id
      },
      immediate: true
    }
  },

  methods: {
    handleClick(i) {
      this.$router.push({
        name: 'theater',
        params: {
          id: i
        },
        query: {
          city: `城市${i}`
        }
      })
    },
    handleBtnClick() {
      this.$router.push('/movie')
    }
  },

  mounted() {
    // ajax
  },
}
</script>

<style lang='stylus' scoped>

</style>